import { createElement } from "../../lib/skeleton/index.js";
import { qs, safe } from "../../lib/dom.js";
import { animate, slideYIn } from "../../lib/animate.js";
import { loadCSS } from "../../helpers/loader.js";
import { isSDK } from "../../helpers/sdk.js";
import assert from "../../lib/assert.js";

import "../../components/dropdown.js";

export default class ComponentMenubar extends HTMLElement {
    constructor() {
        super();
        this.classList.add("component_menubar");
        this.innerHTML = `
            <div class="container">
                <span>
                    <div class="titlebar ellipsis" style="opacity:0">${safe(this.getAttribute("filename")) || "&nbsp;"}</div>
                    <div class="action-item no-select"></div>
                </span>
            </div>
        `;
        if (new URLSearchParams(location.search).get("nav") === "false") {
            const $container = assert.type(this.firstElementChild, HTMLElement);
            $container.classList.add("inherit-width");
        }
    }

    async connectedCallback() {
        const $title = assert.type(this.querySelector(".titlebar"), HTMLElement);
        this.timeoutID = setTimeout(() => animate($title, {
            time: 250,
            keyframes: slideYIn(2),
            onExit: () => $title.style.opacity = 1,
        }), 100);
    }

    disconnectedCallback() {
        clearTimeout(this.timeoutID);
    }

    render(buttons) {
        const $item = assert.type(this.querySelector(".action-item"), HTMLElement);
        for (let i=buttons.length-1; i>=0; i--) {
            $item.appendChild(buttons[i]);
        }
        animate($item, { time: 250, keyframes: slideYIn(2) });
    }

    add($button) {
        const $item = assert.type(this.querySelector(".action-item"), HTMLElement);
        $item.prepend($button);
        animate($button, { time: 250, keyframes: slideYIn(2) });
        return $button;
    }
}

export function buttonDownload(name, link) {
    const ICON = {
        DOWNLOAD: "",
        LOADING: "",
    };
    const $el = createElement(`
        <span class="download-button">
            <a href="${link}" download="${safe(name)}">
                <img class="component_icon" draggable="false" src="${ICON.DOWNLOAD}" alt="download">
            </a>
        </span>
    `);
    const $img = qs($el, "img");
    qs($el, "a").onclick = () => {
        if (isSDK()) return;
        document.cookie = "download=yes; path=/; max-age=120;";
        $img.setAttribute("src", ICON.LOADING);
        const id = setInterval(() => {
            if (/download=yes/.test(document.cookie) !== false) return;
            clearInterval(id);
            $img.setAttribute("src", ICON.DOWNLOAD);
        }, 500);
    };
    return $el;
}

export function buttonFullscreen($screen, fullscreen) {
    let fullscreenHandler = fullscreen;
    if (!fullscreen) {
        if ("webkitRequestFullscreen" in document.body) {
            fullscreenHandler = () => $screen.webkitRequestFullscreen();
        } else if ("mozRequestFullScreen" in document.body) {
            fullscreenHandler = () => $screen.mozRequestFullScreen();
        }
    }
    if (!fullscreenHandler) return document.createDocumentFragment();
    const $el = createElement(`
        <button role="button">
            <img class="component_icon" draggable="false" src="" alt="fullscreen">
        </button>
    `);
    $el.onclick = fullscreenHandler;
    return $el;
}

export function renderMenubar($menubar, ...buttons) {
    assert.type($menubar, ComponentMenubar);
    $menubar.render(buttons.filter(($button) => $button));
    return $menubar;
}

export async function init() {
    return loadCSS(import.meta.url, "./component_menubar.css");
}

if (!customElements.get("component-menubar"))
    customElements.define("component-menubar", ComponentMenubar);
